<template>
  <div>
    <div class="link-container">
      <a
        v-for="item in linklist"
        :key="item.id"
        href="https://element.eleme.io"
        target="_blank">
        <div>
          <el-image
            class="el-image-container"
            :src="item.image"
            fit="fit">
          </el-image>
          <div class="el-image-title">{{ item.title }}</div>
        </div>
      </a>
    </div>
  </div>
</template>

<script>
import {getMenusImage} from '@/api/menu'

export default {
  name: 'Dashboard2',
  data() {
    return {
      linklist: []
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      getMenusImage(9).then(response => {
        this.linklist = response.data.items
      })
    }
  }
}
</script>

<style scoped>
.link-container {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-template-rows: auto auto auto;
  justify-content: space-around;
  align-content: space-around;
  min-height: 600px;
}

.el-image-container {
  border-radius: 15px;
}

.el-image-title {
  font-size: 14px;
  color: #59595d;
  text-align: center;
}
</style>
